<template>
  <view class="container">
    <view class="example">
      <u-form :model="wxUser" ref="uForm" label-width="180">
        <u-form-item label="头像">
          <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
            <image class="avatar" :src="avatar"></image>
          </button>
				</u-form-item>
				<u-form-item label="昵称" prop="name">
          <input type="nickname" placeholder="请输入昵称" v-model="wxUser.name"/>
        </u-form-item>
				<u-form-item label="手机号">
          <u-input v-model="wxUser.phone"/>
        </u-form-item>
			</u-form>
      <view style="margin-top: 30px;">
        <u-button u-button @click="submit" type="primary">保存</u-button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        wxUser: {},
        avatar: '',
        rules: {
          name: {
            rules: [{
              required: true,
              errorMessage: '用户昵称不能为空'
            }]
          },
        }
      }
    },
    onLoad() {
      this.getUser()
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules)
    },
    methods: {
      getUser() {
        this.$request({
        	url:'/getInfo'
        }).then(res => {
        	this.wxUser = res.data
					this.$request({
						url:'/minio/preview?fileName=' + this.wxUser.avatar
					}).then(response => {
						this.avatar = response.data
					})
        }).catch(() => {
        	
        })
      },
      onChooseAvatar(e) {
        console.log('微信头像信息', e)
        // 将数据赋值
        const { avatarUrl } = e.detail 
        this.avatar = avatarUrl
        uni.uploadFile({
          url: this.$BASE_URL + '/minio/uploadFile',
          name: 'file',
          filePath: avatarUrl,
          header: {'Authorization':this.$store.state.token},
          success: response => {
						const res = JSON.parse(response.data)
            this.wxUser.avatar = res.data
          }
        })
      },
      submit(ref) {
        this.$refs.uForm.validate(valid => {
          if (valid) {
            this.$request({
              url:'/edit',
              method: 'put',
              data: {
                avatar: this.wxUser.avatar,
                name: this.wxUser.name,
                phone: this.wxUser.phone
              }
            }).then(res => {
              uni.showToast({
                title: '修改成功',
                icon: 'success'
              })
							uni.navigateBack()
            }).catch(() => {
              
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }

  .example {
    padding: 15px;
    background-color: #fff;
  }

  .segmented-control {
    margin-bottom: 15px;
  }

  .button-group {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
  }

  .form-item {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .button {
    display: flex;
    align-items: center;
    height: 35px;
    line-height: 35px;
    margin-left: 10px;
  }

  .avatar-wrapper{
    width: 120rpx;
    height: 120rpx;
    border-radius: 30px;
    margin-left: 0px;
  }
  .avatar{
    position:absolute;
    width: 120rpx;
    height: 120rpx;
    left: 0%;
    z-index: 1;
  }
</style>
